<!DOCTYPE html>
<html>
<head>
    <title>Tree formation</title>
    <link rel="stylesheet" href="../css/jquery.mobile-1.3.2.min.css" />
    <script type="text/javascript"  src="../js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../js/jquery.mobile-1.3.2.min.js"></script>
 
 
 <script>
 var globalTagName
 var elementStack=new Stack();
 var indexOfGeneration=0;
 var counter=0;
 var idCounter=0;
   var counter1=0;
 
 function Stack(){
  this.stac=new Array();
  this.pop=function(){
  return this.stac.pop();
  }
  this.push=function(item){
  this.stac.push(item);
  }
  this.top=function(){
  var topIndex=this.stac.length-1;
   if(topIndex!=-1){
    return this.stac[topIndex];
   }else{
    return "stack is empty";
   }
  }
  this.lengthStack=function(){
  var topIndex=this.stac.length;
  
  return topIndex;
  }
  this.element=function(index){
  
  return this.stac[index];
  
  }
 } 
 
 function treeFormatArray(element){
 var nameOfTag=element.prop("tagName");
 elementStack.push(nameOfTag);
 alert(elementStack.top()+indexOfGeneration);
 
 
 if(!($(element).hasClass('notAllowedInList'))){
 var idTemp="generationBasedLineNo";
   if(nameOfTag=="HTML"){
   idCounter=counter;
    $("<div id="+idTemp+idCounter+" class='notAllowedInList'></div>").appendTo("#generationBasedLineNo");
    $("#"+idTemp+idCounter).text(nameOfTag);
    $("#"+idTemp+idCounter).css("visibility", "visible");
   }
   else{
   idCounter=counter;
   counter1=counter-1;
    $("<div id="+idTemp+idCounter+" class='notAllowedInList'></div>").appendTo("#"+idTemp+counter1);
    $("#"+idTemp+idCounter).text(nameOfTag);
    $("#"+idTemp+idCounter).css("visibility", "visible");
   }
   
   counter=counter+1;
 }
 
 
 if(element.children().length!=0){
  indexOfGeneration=indexOfGeneration+1;
  $(element).children().each(function(e){
  var tagName=$(this).prop("tagName");
  //alert(tagName+" "+e);
  treeFormatArray($(this));
  if(element.children().length==(e+1)){
  indexOfGeneration=indexOfGeneration-1;
   alert('now this works');
  }
  
 });
 
 }else{
  
  alert('no child');
 }
 
 
 
 
 }
 
 $(document).ready(function(){
  
  $(document).children().each(function(e){
  var tagName=$(this).prop("tagName");
  //alert(tagName);
   treeFormatArray($(this));
  
  });
  printStack();
  $('#button1').bind('click',function(){
  $.mobile.changePage("#Page2");
  
  });
 });
 
 
 function printStack(){
 //alert(elementStack.lengthStack());
 for(var i=0;i<elementStack.lengthStack();i++){
 //alert("in pop : "+elementStack.element(i));
  }
  //alert(elementStack.lengthStack());
 }
 
 </script>
 
 </head>
<body>
<div data-role="page" id="Page1">
 <div data-role="header">
 </div>
 <div data-role="content">
   <a href="#" data-role="button" id="button1">page1</a>
 </div>
 <div data-role="footer"> 
 </div>
</div>
<div class="notAllowedInList" data-role="page" id="Page2">
 <div data-role="header" class="notAllowedInList">
 </div>
 <div data-role="content" id="generationBasedLineNo" class="notAllowedInList">
   
 </div>
 <div data-role="footer" class="notAllowedInList"> 
 </div>
</div>
</body>
</html>